<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{ title }}</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
    <style> .container { display: flex; justify-content: center; align-items: center; } .item { margin: auto; } </style>
  </head>
  <body>
      <div class="container">
        <div class="item" id="{{ chart_id }}" style="width: {{ width }}px; height: {{ height }}px"></div>
      </div>
      
      <script type="text/javascript">
          var chart = echarts.init(document.getElementById('{{ chart_id }}'));
          var option = {{{ chart_option }}};
          chart.setOption(option);
      </script>
  </body>
</html>
